<template>
  <a-drawer
    title="编辑管理计划"
    :width="600"
    :visible.sync="visible"
    :body-style="{'padding-top': '0px', paddingBottom: '80px' }"
    @close="close"
  >
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" layout="horizontal">
      <a-form-item label="时间范围">
        <a-range-picker v-decorator="['rangePicker', rangeConfig]" :format="'YYYY-MM-DD'" />
      </a-form-item>
      <a-form-item label="计划内容">
        <a-textarea
          v-decorator="['DpmpInfo', { rules: [{ required: true, message: '计划内容不能为空!' }] }]"
          placeholder="请输入计划内容"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item label="建议">
        <a-textarea
          v-decorator="['DpmpSuggest', { rules: [{ required: true, message: '建议不能为空!' }] }]"
          placeholder="请输入建议"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
    </a-form>

    <div
      class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center"
    >
      <a-button :style="{ marginRight: '20px' }" class="w-[200px]" @click="close">取消</a-button>
      <a-button
        :loading="loading"
        class="w-[200px]"
        type="primary"
        @click.native.prevent="submit()"
      >
        <span v-if="!loading">提交计划</span>
        <span v-else>提交中...</span>
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { getManageplanDetail, editManageplan } from '@/api/index'
import moment from 'moment'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [
          { type: 'array', required: true, message: '时间区域不能为空！' },
        ],
      },
      docterList: [],
      visible: false,
      loading: false,
      listLoading: false,
      id: 0,
    }
  },
  mounted() {},
  methods: {
    /**
     *
     * @param {*} data 数据
     */
    async open(id) {
      this.visible = true
      this.id = id
      try {
        const { data } = await getManageplanDetail({ id })
        await this.$nextTick()
        this.form.setFieldsValue({
          rangePicker: [
            moment(data.DpmpStarttime, 'YYYY-MM-DD'),
            moment(data.DpmpEndtime, 'YYYY-MM-DD'),
          ],
          DpmpInfo: data.DpmpInfo,
          DpmpSuggest: data.DpmpSuggest,
        })
      } catch (error) {
        this.$message.error(error)
      }
    },
    submit() {
      const {
        form: { validateFields },
      } = this
      const id = this.id
      this.loading = true
      validateFields(
        ['rangePicker', 'DpmpInfo', 'DpmpSuggest'],
        { force: true },
        async (err, values) => {
          if (!err) {
            try {
              values.DpmpStarttime = values.rangePicker[0].format('YYYY-MM-DD')
              values.DpmpEndtime = values.rangePicker[1].format('YYYY-MM-DD')
              console.log('values', values)
              await editManageplan({ ...values, id })
              this.$emit('succeed')
              this.$message.success('操作成功！')
              this.close()
            } catch (error) {
              this.$message.error(error)
            } finally {
              this.loading = false
            }
          } else {
            setTimeout(() => {
              this.loading = false
            }, 600)
          }
        }
      )
    },
    close() {
      this.visible = false
      this.form.resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
.shadow {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
</style>